<template>
  <div class="page-search">
    <mt-search
      :autofocus='true'
      v-model="value"
      cancel-text="Cancel"
      placeholder="Search"
    >
      <mt-cell
        v-for="(item,index) in defaultResult"
        :key='index'
        :title="item">
      </mt-cell>
    </mt-search>
    <div class="discover" v-show='isDiscover'>
      <div class="disText">Discover</div>
      <div class="tagWrap">
        <div class="raindropItem"
             v-for="(item,index) in ripples"
             @click='() =>_handleChoose(item.parent_id,item.name)'
             :key='index'
        >
          {{item.name}}
        </div>
      </div>
      <div class="refresh" @click='_handleRefresh'>Refresh</div>
    </div>
    <div class="created" v-show='isCreated'>
      <div class="navTab">
        <div class="leftIcon" @click='_handleBack'></div>
        <div class="titleText">Create a new raindrop</div>
        <div></div>
      </div>
      <div class="showChoose">
        <div class="choose">{{chooseName}}</div>
      </div>
      <div class="textinput">
        <textarea name="" v-model='contents' class='texti' cols="30" rows="6" :placeholder='textareas'></textarea>
      </div>
      <div class="goUpload" @click='_handleGoupload'>Go upload contents</div>
    </div>

  </div>
</template>

<script>
  import api from '../../plugins/api'
  import { Toast } from 'mint-ui'

  const Cookie = process.browser ? require('js-cookie') : undefined
  export default {
    name: 'page-search',
    data() {
      return {
        textareas: 'Tell your story about this raindrop adn then upload some contents to prove it...',
        isDiscover: true,
        isCreated: false,
        value: '',
        contents: '',
        page: 1,
        ripples: '',
        chooseName: '',
        chooseTagId: '',
        defaultResult: [
          'Apple',
          'Banana',
          'Orange',
          'Durian',
          'Lemon',
          'Peach',
          'Cherry',
          'Berry',
          'Core',
          'Fig',
          'Haw',
          'Melon',
          'Plum',
          'Pear',
          'Peanut',
          'Other'
        ]
      }
    },
    created() {
      this._handleRipple()
    },
    computed: {
      filterResult() {
        console.log('aaaaaaaa')
      }
    },
    methods: {
      _handleDelete() {
        console.log('aaa')
      },

      //点击选择自己的ranindrop
      _handleChoose(id, name) {
        this.isCreated = true
        this.chooseName = name
        this.chooseTagId = id
      },

      //刷新ripple
      _handleRefresh() {
        this.page++
        this._handleRipple()
      },

      // 获取推荐的ripple
      async _handleRipple() {
        const params = {
          sid: Cookie.get('sid'),
          page: this.page,
          pageSize: 16
        }
        let res = await api.getRipples(params)
        if (res.status == 0) {
          let rippleData = res.data
          this.ripples = rippleData
        } else {
          Toast(res.info)
        }
      },
      //关闭当前弹窗
      _handleBack() {
        this.isCreated = false
      },

      // 创建完成 暂时回到me
      async _handleGoupload() {
        console.log(this.contents)
        const params = {
          sid: Cookie.get('sid'),
          parent: this.chooseTagId,
          tag_name: this.chooseName,
          introduction: this.contents
        }
        const res = await api.setRaindrop(params)
        console.log(res)
        if (res.status == 0) {
          this.$router.push({ path: '/me' })
        } else {
          Toast(res.info)
        }
      }

    },
    watch: {
      value: function(curr, old) {
        if (curr) {
          this.isDiscover = false
        } else {
          this.isDiscover = true
        }

        console.log(curr)
      }
    }
  }
</script>

<style lang="scss">
  .page-search {
    height: 100%;
    height: 100%;
    position: relative;

    .created {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      background: #F9FAFC;

      .navTab {
        height: 88px;
        background-color: rgba(245, 246, 247, 1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;

        .leftIcon {
          width: 48px;
          height: 48px;
          background: url("../../assets/images/left.png") no-repeat center;
          -webkit-background-size: 100%;
          background-size: 100%;
        }

        .titleText {
          font-size: 30px;
          font-weight: 600;
          height: 100%;
          display: flex;
          align-items: center;
        }
      }

      .showChoose {
        width: 100%;
        height: 116px;
        background: #ffffff;
        padding: 24px 30px;

        div {
          width: fit-content;
        }

        .choose {

          background: #1FCCC0;
          color: #ffffff;
          margin: 0 20px 20px 0;
          padding: 16px 38px;
          height: 70px;
          text-align: center;
          border-radius: 31px 31px 31px 6px;
          max-width: 600px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .textinput {
        width: 100%;
        min-height: 235px;
        background: #ffffff;
        padding: 40px;
        margin-top: 20px;

        .texti {
          border: none;
          width: 100%;
          height: 100%;
          font-size: 30px;
          line-height: 42px;
        }
      }

      .goUpload {
        width: 690px;
        height: 88px;
        background: rgba(31, 204, 192, 1);
        border-radius: 44px;
        line-height: 88px;
        text-align: center;
        color: #ffffff;
        font-size: 28px;
        margin: 0 auto;
        margin-top: 63px;
      }
    }

    .discover {
      position: absolute;
      top: 90px;
      width: 100%;
      font-size: 30px;
      padding: 0 30px;

      .disText {
        color: #333333;
        line-height: 80px;
      }

      .tagWrap {
        display: flex;
        flex-wrap: wrap;

        .raindropItem {
          color: #666666;
          margin: 0 20px 20px 0;
          padding: 16px 38px;
          height: 70px;
          text-align: center;
          background: #F2F8F8;
          border-radius: 31px 31px 31px 6px;
          max-width: 500px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          &:hover {
            background: #1FCCC0;
            color: #ffffff;
          }
        }
      }

      .refresh {
        width: 220px;
        height: 70px;
        background: rgba(255, 255, 255, 1);
        border-radius: 35px;
        border: 2px solid rgba(31, 204, 192, 1);
        font-size: 30px;
        color: #1FCCC0;
        text-align: center;
        line-height: 70px;
      }
    }

    .mint-searchbar {
      background: #ffffff;

      .mint-searchbar-inner {
        height: 64px;
        background: #F9F9F9;
        border-radius: 34px;

        .mint-searchbar-core {
          background: #F9F9F9;
        }
      }

      .mint-searchbar-cancel {
        color: #9B9B9B;
        font-size: 26px;
      }
    }

    .mint-search-list {
      border-top: 1px solid rgba(0, 0, 0, .1);
      top: 40px;
    }

    .mint-cell-wrapper {
      margin: 20px 0 0 30px;
    }

    .mint-cell-text {
      color: #666666;
      margin: 0 20px 20px 0;
      padding: 16px 38px;
      height: 70px;
      line-height: 70px;
      text-align: center;
      background: #F2F8F8;
      border-radius: 31px 31px 31px 6px;
      max-width: 500px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
</style>
